<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<c:set var="path" value="${pageContext.request.contextPath }" />
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>变频器设备管理(4G)</title>
	<meta name="viewport"  content="width=device-width, initial-scale=1">
	<link rel="stylesheet" type="text/css" href="${path}/resource/plugins/bootstrap/css/bootstrap.min.css">
  	<link rel="stylesheet" type="text/css" href="${path}/resource/css/ysrmain.css">
	<link rel="stylesheet" type="text/css" href="${path}/resource/css/gzfx.css">
	<link rel="stylesheet" type="text/css" href="${path}/resource/css/allEquipment.css">
	<link rel="stylesheet" type="text/css" href="${path}/resource/css/myLayer.css">
	<link rel="stylesheet" type="text/css" href="${path}/resource/plugins/date/bootstrap-datetimepicker.min.css" >
	<script src="${path}/resource/plugins/jQuery/jquery-2.2.3.min.js"></script>
	<script type="text/javascript" src="${path}/resource/plugins/bootstrap/js/bootstrap.min.js"></script>
		<script src="${path}/resource/plugins/date/bootstrap-datetimepicker.min.js" charset="UTF-8"></script>
	<script src="${path}/resource/plugins/date/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
	<script type="text/javascript" src="${path}/resource/js/echarts.min.js"></script>	
	<script type="text/javascript"></script>
	<style type="text/css">
	.now-error{border-top-left-radius: 5px;border-bottom-left-radius: 5px;color:#fff;border:1px solid #3399b7;padding:4px 10px;z-index: 1000;display: inline-block;}
	.history-error{border-top-right-radius: 5px;border-bottom-right-radius: 5px;color:#fff;padding:5px 10px;background:linear-gradient(to bottom, rgba(4, 188, 236, 0.6) 0%,rgba(255, 255, 255, 0.1) 50%,rgba(255, 255, 255, 0) 51%,rgba(4, 188, 236, 0.6) 100%)}
	</style>
</head>
<body>
	
	<!-- 头部 -->
	<!-- 开始 -->
	<jsp:include page="./top_nav.jsp"></jsp:include>
	<!-- 头部结束 -->
    <!-- 右侧内容区域 -->
    <div class="right-content  container-fluid">
    	<div class="row layer">
	    	<div class="layer1" >
	    		<!-- 主要图表区域 -->
	    		<div class=" row right-nav">
		    			<div class="title-name">
		    				<span>变频器设备管理</span>
		    				
		    			</div>
		    			<div class=" right nav-over padding-r-1  ">
		    				 	<a href="${path}/monitor/redirect/equipInput" class="add-a">新增</a>
		    				         <button class=" search-btn float-r" type="button" onclick="search();"></button>
						      <input id="require" type="text" placeholder="请输入检索的故障信息" class="back-m1 search-input float-r search back-m1">					      										      			
		    			</div>	    			
		    	</div>	
			    <!-- Table -->
			    <div class="table-div content-img">
			      <a class="now-error" href="javascript:void(0)">4G模块</a><a class="history-error" href="${path}/monitor/redirect/equipManageGree">格&nbsp;&nbsp;&nbsp;力</a><br>	
				  <table id="listtable" class="table table-striped" style="font-size: 13px">
				  	  <tr>
						  <th>变频器序列号</th>
						  <th>设备型号</th>
						  <th>所在城市</th>
						  <th>详细</th>
						  <th>删除</th>
					  </tr>
					  <tr>
						  <td><a class="color-w" href="<%=path%>/manage/redirect/allEquip/faultAnalysis?serialNum=0181413c">0181413c</a></td>
						  <td>风机接触器无法关闭</td>
						  <td>珠海市</td>
						  <td><img class="table-icon" alt="" src="${path}/resource/images/sbmsg.png"></td>
						  <td><img class="table-icon" alt="" src="${path}/resource/images/sbsc.png"></td>
					  </tr>
					  <tr>
						  <td><a class="color-w" href="<%=path%>/manage/redirect/allEquip/faultAnalysis?serialNum=0181413c">0181413c</a></td>
						  <td>风机接触器无法关闭</td>
						  <td>珠海市</td>
						  <td><img class="table-icon" alt="" src="${path}/resource/images/sbmsg.png"></td>
						  <td><img class="table-icon" alt="" src="${path}/resource/images/sbsc.png"></td>
					  </tr>
					  <tr>
						  <td><a class="color-w" href="<%=path%>/manage/redirect/allEquip/faultAnalysis?serialNum=0181413c">0181413c</a></td>
						  <td>风机接触器无法关闭</td>
						  <td>珠海市</td>
						  <td><img class="table-icon" alt="" src="${path}/resource/images/sbmsg.png"></td>
						  <td><img class="table-icon" alt="" src="${path}/resource/images/sbsc.png"></td>
					  </tr>
					  <tr>
						  <td><a class="color-w" href="<%=path%>/manage/redirect/allEquip/faultAnalysis?serialNum=0181413c">0181413c</a></td>
						  <td>风机接触器无法关闭</td>
						  <td>珠海市</td>
						  <td><img class="table-icon" alt="" src="${path}/resource/images/sbmsg.png"></td>
						  <td><img class="table-icon" alt="" src="${path}/resource/images/sbsc.png"></td>
					  </tr>
				  </table>
			    </div>
			    <!-- 分页 -->
			    <div id="fenye" class="pagers">
			  	  <nav class="float-r padding-3">
			  	    <ul class="pagination">
			  	      <li id="goPrev"><a href="javascript:void(0);">&laquo;</a></li>
				      <li class="active yema"><a href="javascript:void(0);">1</a></li>
				      <li class="yema"><a href="javascript:void(0);">2</a></li>
				      <li id="goNext"><a href="javascript:void(0);">&raquo;</a></li>
			  	    </ul>
			  	  </nav>
			    </div>
			</div>
			<!--删除弹出层-->
			<div class="layer2 layer-remove">
				<div class="layer-content">
					<div class="layer-msg">
						<div>确定删除该条记录?
						</div>
					</div>
					<div class="layer-btn">
						<div class="sure2 delBtn" id="delSure"><a href="javascript:void(0)" class="color-w">确定</a></div>
						<div class="cancel2 delBtn" id="delCancel"><a href="javascript:void(0)" class="color-w">取消</a></div>
					</div>					
				</div>
			</div>
			<!--详情弹出层-->
			<div class="layer2">
				<div class="layer-content">
				<form id="dataForm" class="input-form">
					<div class="layer-top">
						<div>
							变频器<span id="serialNum">00851125</span>详细信息
						</div>
					</div>
					<input type="hidden" name="serialNum">
					<div class="layer-body">
						<div class="div-group4">
							<label class="">所在省份:</label>
							<select id="province" name="province">
					    		<option value=""></option>
					    	</select>
						</div>
						<div class="div-group4">
							<label>所在城市:</label>
							<select id="cityArea" name="cityArea">
					    		<option value=""></option>
					    	</select>
						</div>
						<div class="div-group4">
							<label>位置经度:</label>
							<input id="jD" name="jD" type="text">
						</div>
						<div class="div-group4">
							<label>位置纬度:</label>
							<input id="wD" name="wD" type="text">
						</div>
						<div class="div-group4">
							<label>设备型号:</label>
							<select id="powerLevelType" name="powerLevelType">
					    		<option value=""></option>
					    	</select>
						</div>
						<div class="div-group4">
							<label>投运日期:</label>
							<input name="operationDate" type="text" readonly="readonly" data-link-format="yyyy-mm-dd" data-link-field="dtp_input2"  class="form_date  input-text" id="datetimepicker2" data-date-format="yyyy-mm-dd ">
			     			<span class=" span-date"><span class="glyphicon glyphicon-calendar"></span></span>
						</div>
						
						<div class="div-group8">
							<label>详细地址:</label>
							<input name="locationDetail" type="text">
						</div>
						<div class="div-group4">
							<label>软件版本:</label>
							<input name="softwareVersion" type="text">
						</div>
						<div class="div-group4">
							<label>用户姓名:</label>
							<input name="userName" type="text">
						</div>
						<div class="div-group4">
							<label>用户电话:</label>
							<input name="userTel" type="text">
						</div>
						<div class="div-group4">
							<label>用户邮箱:</label>
							<input name="userEmail" type="text">
						</div>
						<div class="div-group4">
							<label>路由序号:</label>
							<input name="fourGRouteSeriNum" type="text">
						</div>
						<div class="div-group4">
							<label>路由型号:</label>
							<input name="fourGRouteType" type="text">
						</div>
						<div class="div-group4">
							<label>路由卡号:</label>
							<input name="fourGRouteSIMCard" type="text">
						</div>
						<div class="div-group4">
							<label>IP隧道值:</label>
							<input name="tunnelEndIP" type="text">
						</div>																		
						<label class="label-text">故障现象:</label><br>
						<textarea name="factoryCommission" class="textarea" rows="" cols="" placeholder="正常"></textarea><br>	
						<div class="foot">
							<a class="save" href="javascript:void(0)" onclick="update()">保存</a>
							<a class="cancel" href="javascript:void(0)">取消</a>	
						</div>		
					</div>
				</form>
				</div>
			</div>
		</div>
    </div>

	


	
</body>
<script type="text/javascript" src="${path}/resource/js/webSocketConf.js"></script>	
<script type="text/javascript">
$(function(){
	$(".menu-left").children("dl").eq(1).addClass("dl-active");
	/* search(); */
	
	loadSelect();
})
//加载下拉框
function loadSelect() {
	$.ajax({
		type : 'POST',
		url : '<%=path%>/manage/initopt',
		data : {
			opttype : 'province'
		},
		dataType : 'json',
		async : false,
		success : function(result) {
			if(result.status == 'OK') {console.log(result);
				var html = '<option value="">——— 请选择 ———</option>';
				var ops = eval("(" + result.data.province + ")");
				$.each(ops, function(i) {
					html += ops[i].value;
				});
				$('#province').html('');
				$('#province').append(html);
			} else {
				console.error("获取下拉框数据失败！");
			}
		},
		error : function() {
			console.error("系统错误！");
		}
	});
	$.ajax({
		type : 'POST',
		url : '<%=path%>/manage/initopt',
		data : {
			opttype : 'powerLevel'
		},
		dataType : 'json',
		async : false,
		success : function(result) {
			if(result.status == 'OK') {console.log(result);
				var html = '<option value="">——— 请选择 ———</option>';
				var ops = eval("(" + result.data.powerLevel + ")");
				$.each(ops, function(i) {
					html += ops[i].value;
				});
				$('#powerLevelType').html('');
				$('#powerLevelType').append(html);
			} else {
				console.error("获取下拉框数据失败！");
			}
		},
		error : function() {
			console.error("系统错误！");
		}
	});
}
//选择省份
$('#province').change(function() {
	if($(this).val() != "" && $(this).val() != null) {
		var val = $(this).val();
		$.ajax({
			type : 'POST',
			url : '<%=path%>/manage/sltoptupdate',
			data : {
				opttype : 'cityArea',
				actval : val
			},
			dataType : 'json',
			async : false,
			success : function(result) {
				if(result.status == 'OK') {console.log(result);
					var html = '<option value="">——— 请选择 ———</option>';
					var ops = eval("(" + result.data.cityArea + ")");
					$.each(ops, function(i) {
						html += ops[i].value;
					});
					$('#cityArea').html('');
					$('#cityArea').append(html);
				} else {
					console.error("获取下拉框数据失败！");
				}
			},
			error : function() {
				console.error("系统错误！");
			}
		});
	} else {
		$('#cityArea').html('<option value=""></option>');
	}
});
/*详细信息弹窗  */
$(function(){
// 	$(".detailedMsg").click(function(){
// 		$(".layer2").show();
// 	})
	$(".cancel").click(function(){
		$(".layer2").hide();
	})	
})

var size = 1;
var curPageNO = 1;
function search() {
	$.ajax({
		type : 'POST',
		url : '<%=path%>/manage/firstdevTotal',
		data : {
			livedata : livedata,
			require : $("#require").val(),
			pageSize : 10,
			curPageNO : curPageNO
		},
		dataType : 'json',
		async : false,
		success : function(result) {
			if(result.status == "OK") {
				$('#listtable').text('');
				var html = "<tr><th>变频器序列号</th><th>设备型号</th><th>所在城市</th><th>详细</th><th>删除</th></tr>";
				if(result.data.list == "[null]") {
					
				} else {
					size = result.data.size;
					var list = eval("(" + result.data.list + ")");
					$.each(list, function(i){
						var href = "<%=path%>/manage/redirect/allEquip/faultAnalysis?serialNum="+list[i].serialNum;
						html += '<tr><td><a class="color-w" href='+href+'>'+list[i].serialNum +
								'</a></td><td>'+list[i].powerLevelType +
								'</td><td>'+list[i].cityArea +
								'</td><td><a href="javascript:void(0);" onclick="devdetail(\''+list[i].serialNum+'\')"><img class="table-icon" alt="详情" src="${path}/resource/images/sbmsg.png"></a></td>' +
								'<td><a href="javascript:void(0);" onclick="devdelete(\''+list[i].serialNum+'\')"><img class="table-icon" alt="删除" src="${path}/resource/images/sbsc.png"></a></td></tr>';
					});
				}
				$('#listtable').append(html);
			}
		},
		error : function() {
			//alert("系统错误！");
		}
	});
}
//设备详情
function devdetail(serialNum) {
	if(serialNum != undefined && serialNum != "") {
		$("#serialNum").text(serialNum);
		$('input[name="serialNum"]').val(serialNum);
		$.ajax({
			type : 'POST',
			url : '<%=path%>/manage/managerdevdetail',
			data : {
				serialNum : serialNum
			},
			dataType : 'json',
			async : false,
			success : function(result) {
				if(result.status == 'OK') {console.log(result);
					
					$('#powerLevelType').val(result.data.powerLevelType);
					$('#province').val(result.data.province);
					//devAddInfo.setCityArea(request.getParameter("cityArea"));
					$('#jD').val(result.data.jD);
					$('#wD').val(result.data.wD);
					$('input[name="operationDate"]').val(result.data.operationDate);
					$('input[name="locationDetail"]').val(result.data.locationDetail);
					$('textarea[name="factoryCommission"]').val(result.data.factoryCommission);
					$('input[name="softwareVersion"]').val(result.data.softwareVersion);
					$('input[name="fourGRouteSeriNum"]').val(result.data.fourGRouteSeriNum);
					$('input[name="fourGRouteType"]').val(result.data.fourGRouteType);
					$('input[name="fourGRouteSIMCard"]').val(result.data.fourGRouteSIMCard);
					$('input[name="tunnelEndIP"]').val(result.data.tunnelEndIP);
					$('input[name="userTel"]').val(result.data.userTel);
					$('input[name="userEmail"]').val(result.data.userEmail);
					$('input[name="userName"]').val(result.data.userName);
				
					if(result.data.province != undefined && result.data.province != "") {
						$.ajax({
							type : 'POST',
							url : '<%=path%>/manage/sltoptupdate',
							data : {
								opttype : 'cityArea',
								actval : result.data.province
							},
							dataType : 'json',
							async : false,
							success : function(result2) {
								if(result2.status == 'OK') {console.log(result2);
									var html = '<option value="">——— 请选择 ———</option>';
									var ops = eval("(" + result2.data.cityArea + ")");
									$.each(ops, function(i) {
										html += ops[i].value;
									});
									$('#cityArea').html('');
									$('#cityArea').append(html);
									$('#cityArea').val(result.data.cityArea);
								} else {
									console.error("获取下拉框数据失败！");
								}
							},
							error : function() {
								console.error("系统错误！");
							}
						});
					}
				} else {
					console.error("获取设备详情数据失败！");
				}
			},
			error : function() {
				console.error("系统错误！");
			}
		});
	}
	$(".layer2").show();
}
$(".cancel").click(function(){
	$(".layer2").hide();
});
function update() {
	$.ajax({
		type : 'POST',
		url : '<%=path%>/monitor/managerdevUpdate',
		data : $('#dataForm').serialize(),
		dataType : 'json',
		async : false,
		success : function(result) {
			if(result.status == 'OK') {
				if(result.data != null && result.data == "true") {
					alert("修改成功！");
					$(".layer2").hide();
					attrYemaSearch();
<%-- 					window.location.href = '<%=path%>/monitor/redirect/equipManage'; --%>
				} else {
					alert("修改失败！");
				}
			}
		}
	});
}

//设备删除
function devdelete(serialNum) {
	$(".layer-remove").show();
	$(".delBtn").unbind('click');
	
	$(".delBtn").bind('click',function(){
		if(this.id == "delSure") {
			$.ajax({
				type : 'POST',
				url : '<%=path%>/monitor/managerdevdelete',
				data : {
					serialNum : serialNum
				},
				dataType : 'json',
				async : false,
				success : function(result) {
					if(result.status == "OK") {
						console.log(result.data);
						if(result.data == "true") {
							alert("删除成功");
							attrYemaSearch();
						} else {
							alert("删除失败");
						}
					}
				},
				error : function() {
					//alert("系统错误！");
				}
			});
		}
		$(".layer-remove").hide();
	});
}

//点击页码
function attrYemaSearch() {
	curPageNO = 1;
	search();
	//$('.pagination').html('');
	$('.pagination').html('<li id="goPrev"><a href="javascript:void(0);">&laquo;</a></li>'+
	    '<li id="firstyema" class="active yema"><a href="javascript:void(0);">1</a></li>'+
	    '<li id="goNext"><a href="javascript:void(0);">&raquo;</a></li>');
	if(size > 10) {
		var html = '';
		var yemaToal = (size/10)+1;
		for(var i=2; i<yemaToal; i++) {
			html += '<li class="yema"><a href="javascript:void(0);">'+i+'</a></li>'
		}
		$('#firstyema').after(html);
	}
	attrYeMa();
}
function attrYeMa() {
	$('.yema').click(function() {
		console.log("a");
		$('.yema').removeClass("active");
		$(this).addClass("active");
		curPageNO = $(this).children('a').text();
		search();
	});
	$('#goPrev').click(function() {
		var prevyema = $(this).nextAll('.active').prev('.yema');
		if(prevyema != null && prevyema.length > 0) {
			$(this).nextAll('.active').removeClass("active");
			prevyema.addClass("active");
			curPageNO = prevyema.children('a').text();
			search();
		}
	});
	$('#goNext').click(function() {
		var nextyema = $(this).prevAll('.active').next('.yema');
		if(nextyema != null && nextyema.length > 0) {
			$(this).prevAll('.active').removeClass("active");
			nextyema.addClass("active");
			curPageNO = nextyema.children('a').text();
			search();
		}
	});
}


	//获取设备列表实时数据
	
	var webSocket = null;
    var livedata;
    if ("WebSocket" in window) {
		webSocket = new WebSocket(webSocketUrl);
		console.log("建立实时连接！");
	} else if ("MozWebSocket" in window) {
		webSocket = new MozWebSocket(webSocketUrl);
		console.log("建立实时连接！");
	} else {
		alert("浏览器不支持！");
	}
	webSocket.onerror = function() {
		alert("无法建立实时连接！");
	};
	webSocket.onopen = function(event) {
		send();
		console.log("open");
	};
	webSocket.onmessage = function() {
		if(event.data.length>2){
			livedata=event.data;
			//tableinitinfo();
			attrYemaSearch();
			webSocket.close();
		}else{
			console.log("resend...");
			send();
		}		
	};
	webSocket.onclose = function() {
	};
	window.onbeforeunload = function() {
		webSocket.close();
	};
	function send(){    //Websocket接口
	    console.log("send");
// 	    var message = "[{\"serialnum\":\"all\",\"signalnames\":[\"breakerstate\",\"runninglight\",\"faultlight\"]}]";//调用参数
	    var message = "[{\"serialnum\":\"all\",\"signalnames\":[\"c196\",\"c78\",\"c77\"]}]";//调用参数
	    webSocket.send(message);
	}
	/*初始化时间控件*/
	$(function(){
		$(".span-date").click(function(){
			$(this).prev().focus();
		});
		$('.form_date').datetimepicker({
		    language:  'zh-CN',
		    weekStart: 1,
		    todayBtn:  1,
			autoclose: 1,
			todayHighlight: 1,
			startView: 2,
			minView: 2,
			forceParse: 0,
			maxView:4
		});
	})
	
</script>
</html>